<!-- 系统整体筛选项组件 -->
<!--      -->
<!--      -->
<!--      -->
<!--      -->
<!--      -->
<!--      -->
<!--      -->
<!--      -->
<!--      -->
<!--      -->
<!--      -->

<template>
  <div style="margin: 20px; margin-top: 10px; background-color: #fff">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      label-width="68px"
      style="padding: 10px"
    >
      <el-form-item
        label="姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名"
        prop="userName"
        v-if="WhichPage === '社保管理' || WhichPage === '薪酬管理'"
      >
        <el-input
          v-model="props.Params.userName"
          placeholder="请输入员工姓名"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label="lecc账号"
        prop="leccAccount"
        v-if="WhichPage === '社保管理' || WhichPage === '薪酬管理'"
      >
        <el-input
          v-model="props.Params.leccAccount"
          placeholder="请输入员工账号"
          clearable
          style="width: 230px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item
        label="业务中心"
        prop="business"
        v-if="WhichPage === '社保管理' || WhichPage === '薪酬管理'"
      >
        <el-select
          v-model="props.Params.business"
          placeholder="请选择业务中心"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        >
          <el-option
            v-for="item in props.yewu"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
        /></el-select>
      </el-form-item> -->
      <!-- <el-form-item
        label="班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;组"
        prop="team"
        v-if="WhichPage === '社保管理' || WhichPage === '薪酬管理'"
      >
        <el-select
          v-model="props.Params.team"
          placeholder="请选择班组"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        >
          <el-option
            v-for="item in banzu"
            :key="item.teamValue"
            :label="item.teamLabel"
            :value="item.teamValue"
        /></el-select>
      </el-form-item> -->
      <el-form-item
        label="岗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位"
        prop="job"
        v-if="WhichPage === '社保管理' || WhichPage === '薪酬管理'"
      >
        <el-select
          v-model="props.Params.job"
          placeholder="请选择岗位"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        >
          <el-option
            v-for="item in props.gangwei"
            :key="item.dictLabel"
            :label="item.dictLabel"
            :value="item.dictValue"
        /></el-select>
      </el-form-item>
      <el-form-item
        label="费用名称"
        style="width: 308px"
        :label-width="'100px'"
        prop="title"
        v-if="WhichPage === '其他费用'"
      >
        <!-- <el-input
          v-model="props.Params.title"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        /> -->
        <el-select v-model="props.Params.title" placeholder="请选择" clearable>
          <el-option
            v-for="item in nameData"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
        /></el-select>
      </el-form-item>
      <el-form-item
        label="费用发生时间"
        style="width: 308px"
        :label-width="'100px'"
        v-if="WhichPage === '社保管理' || WhichPage === '薪酬管理'"
      >
        <el-date-picker
          v-model="TimeOfExpense"
          type="monthrange"
          range-separator="-"
          :start-placeholder="props.Params.startYearMonth"
          :end-placeholder="props.Params.endYearMonth"
        />
      </el-form-item>
      <el-form-item
        label="费用发生时间"
        :label-width="'100px'"
        v-if="WhichPage === '其他费用'"
      >
        <el-date-picker
          v-model="moneyDate"
          value-format="YYYY-MM"
          type="monthrange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>

      <el-form-item
        label="审核状态"
        prop="AuditStatus"
        v-if="WhichPage === '社保管理' || WhichPage === '薪酬管理'"
      >
        <el-select
          v-model="props.Params.status"
          placeholder="请选择审核状态"
          clearable
          style="width: 230px"
          @keyup.enter="handleQuery"
        >
          <el-option
            v-for="item in statusS"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item>
      <el-form-item
        label="审核状态"
        prop="AuditStatus"
        v-if="WhichPage === '其他费用'"
      >
        <el-select
          v-model="props.Params.auditStatus"
          placeholder="请选择审核状态"
          clearable
          style="width: 230px"
          @keyup.enter="handleQuery"
        >
          <el-option
            v-for="item in statusS"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item>
      <el-form-item
        label="标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题"
        prop="title"
        v-if="
          WhichPage === '发起人' ||
          WhichPage === '我发起' ||
          WhichPage === '审核人'
        "
      >
        <el-input
          v-model="props.Params.title"
          placeholder="请输入标题"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label="发布时间"
        style="width: 308px"
        v-if="
          WhichPage === '发起人' ||
          WhichPage === '我发起' ||
          WhichPage === '审核人'
        "
      >
        <el-date-picker
          v-model="props.Params.publishTime"
          type="month"
          placeholder="请选择发布时间"
        />
      </el-form-item>
      <el-form-item
        label="审核状态"
        prop="AuditStatus"
        v-if="WhichPage === '我发起'"
      >
        <el-select
          v-model="props.Params.status"
          placeholder="请选择审核状态"
          clearable
          style="width: 230px"
          @keyup.enter="handleQuery"
        >
          <el-option
            v-for="item in statusS"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item>
      <el-form-item
        style="width: 308px"
        v-if="
          WhichPage === '发起人' ||
          WhichPage === '我发起' ||
          WhichPage === '审核人'
        "
      >
        <el-button
          type="primary"
          icon="Search"
          @click="handleQuery"
          color="#3175BE"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery" color="#3175BE"
          >重置</el-button
        >
      </el-form-item>
      <el-form-item
        label="文件创建时间"
        :label-width="'100px'"
        v-if="WhichPage === '配置管理'"
      >
        <el-date-picker
          v-model="importTime"
          value-format="YYYY-MM-DD hh:mm:ss"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item
        label="文件类别"
        :label-width="'100px'"
        prop="fileType"
        v-if="WhichPage === '配置管理'"
      >
        <el-select
          v-model="props.Params.fileType"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="dict in fileTypeData"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item> </el-form-item>

      <el-form-item justify="end" v-if="WhichPage === '社保管理'">
        <el-button
          type="primary"
          icon="Search"
          @click="handleQuery"
          color="#3175BE"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery" color="#3175BE"
          >重置</el-button
        >
        <el-button
          type="primary"
          color="#3175BE"
          @click="downloadX"
          v-if="INdex"
          >下载社保导入模板</el-button
        >
        <el-button
          type="primary"
          color="#3175BE"
          @click="ToLeadInto"
          v-if="INdex"
          >导入</el-button
        >
        <el-button type="primary" color="#3175BE" @click="handleExport"
          >导出</el-button
        >
        <!-- <el-button type="primary" color="#3175BE">编辑</el-button> -->
      </el-form-item>
      <el-form-item justify="end" v-if="WhichPage === '薪酬管理'">
        <el-button
          type="primary"
          icon="Search"
          @click="handleQuery"
          color="#3175BE"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery" color="#3175BE"
          >重置</el-button
        >
        <el-button
          type="primary"
          color="#3175BE"
          @click="downloadX1"
          v-if="INdex"
          >下载薪酬绩效模板</el-button
        >
        <el-button
          type="primary"
          color="#3175BE"
          @click="downloadX2"
          v-if="INdex"
          >下载考勤模板</el-button
        >
        <el-button
          type="primary"
          color="#3175BE"
          @click="ToLeadInto"
          v-if="INdex"
          >导入</el-button
        >
        <el-button type="primary" color="#3175BE" @click="handleExport"
          >导出</el-button
        >
      </el-form-item>
      <el-form-item justify="end" v-if="WhichPage === '其他费用'">
        <el-button
          type="primary"
          icon="Search"
          @click="handleQuery"
          color="#3175BE"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery" color="#3175BE"
          >重置</el-button
        >
        <el-button
          type="primary"
          color="#3175BE"
          @click="handleAdd"
          v-if="INdex"
          >新建其他费用</el-button
        >
        <!-- <el-button type="primary" color="#3175BE" @click="ToLeadInto"
          >导入</el-button
        > -->
        <el-button type="primary" color="#3175BE" @click="handleExport"
          >导出</el-button
        >
      </el-form-item>
      <el-form-item justify="end" v-if="WhichPage === '配置管理'">
        <el-button
          type="primary"
          icon="Search"
          @click="handleQuery"
          color="#3175BE"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery" color="#3175BE"
          >重置</el-button
        >
        <el-button color="#3175BE" @click="socialConfigImport"
          >导入社保配置数据</el-button
        >
        <el-button color="#3175BE" @click="payConfigImport"
          >导入薪酬配置数据</el-button
        >
        <el-button color="#3175BE" @click="socialConfigDown"
          >下载社保数据配置模板</el-button
        >
        <el-button color="#3175BE" @click="payConfigDown"
          >下载薪酬数据配置模板</el-button
        >
        <!-- <el-button type="primary" color="#3175BE" @click="handleAdd"
          >新建其他费用</el-button
        > -->
        <!-- <el-button type="primary" color="#3175BE" @click="ToLeadInto"
          >导入</el-button
        > -->
        <!-- <el-button type="primary" color="#3175BE" @click="handleExport"
          >导出</el-button
        > -->
      </el-form-item>

      <el-form-item
        justify="end"
        v-if="WhichPage === '社保管理' || WhichPage === '薪酬管理'"
      >
        <el-button @click="submitShenHe" v-if="INdex">提交审核</el-button>
        <el-button
          @click="revocationShenHe"
          type="danger"
          style="background: #fff; color: red"
          v-if="INdex"
          >撤回审核</el-button
        >
        <el-button
          type="primary"
          color="#3175BE"
          @click="handleSign"
          v-if="INdex1"
          >会签</el-button
        >
      </el-form-item>
      <el-form-item justify="end" v-if="WhichPage === '其他费用'">
        <el-button @click="submitShenHe" v-if="INdex">提交审核</el-button>
        <el-button
          @click="revocationShenHe"
          type="danger"
          style="background: #fff; color: red"
          v-if="INdex"
          >撤回审核</el-button
        >
        <!-- <el-button
                    type="primary"
                    color="#3175BE"
                    @click="handleSign"
                    v-if="!INdex"
                    >会签</el-button
                > -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { watch, ref, onBeforeMount } from "vue";
import { getBanzu } from "@/api/socialSecurity/index";
import { dict } from "@/api/otherCosts/index";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  WhichPage: String,
  Params: Object,
  gangwei: Array,
  yewu: Array,
  userList: Array,
});
// 获取传入信息
const urlParams = new URLSearchParams(window.location.search);
// const id = urlParams.get("id");
const userName = urlParams.get("userName") ? urlParams.get("userName") : "";
const roleName = urlParams.get("roleName")
  ? urlParams.get("roleName")
  : "人力资源";
const INdex = ref(false);
const INdex1 = ref(false);
const emit = defineEmits([
  "searchBtn",
  "reset",
  "handleExport",
  "ToLeadInto",
  "handleSign",
  "downloadX",
  "downloadX1",
  "downloadX2",
  "submitShenHe",
  "revocationShenHe",
  "handleAdd",
  "socialConfigImport",
  "payConfigImport",
  "socialConfigDown",
  "payConfigDown",
]);
const banzu = ref([]);
// 费用名称下拉
const nameData = ref([]);
watch(
  () => props.Params.business,
  () => {
    if (props.Params.business) {
      var params = {
        businessValue: props.Params.business,
      };
      //班组
      getBanzu(params).then((res) => {
        console.log(res.data);
        banzu.value = res.data;
      });
    } else {
      banzu.value = [];
    }
  }
);
onBeforeMount(() => {
  if (roleName?.indexOf("人力资源") == 0) {
    INdex.value = true;
  } else {
    INdex.value = false;
  }
});
watch(
  () => props.userList[1],
  () => {
    if (props?.userList[1]?.roleName) {
      console.log(
        "qwer-",
        roleName,
        props?.userList[1]?.roleName,
        roleName?.indexOf(props?.userList[1]?.roleName)
      );
      if (props.WhichPage === "社保管理" || props.WhichPage === "薪酬管理") {
        if (roleName?.indexOf(props?.userList[1]?.roleName) != -1) {
          INdex1.value = true;
          if (router.currentRoute.value.query?.qw === "1") {
            INdex.value = true;
          }
          console.log("---------");
        } else {
          INdex1.value = false;
          if (router.currentRoute.value.query?.qw === "1") {
            INdex.value = true;
          } else {
            INdex.value = false;
          }
          console.log("lllllll", roleName);
        }
      }
      if (props.WhichPage === "其他费用") {
        if (roleName?.indexOf("人力资源") != -1) {
          INdex.value = true;
          if (router.currentRoute.value.query?.qw === "1") {
            INdex.value = true;
          }
        } else {
          INdex.value = false;
          if (router.currentRoute.value.query?.qw === "1") {
            INdex.value = true;
          } else {
            INdex.value = false;
          }
        }
      }
      console.log(props, props.userList, "2222");
    }
    if (roleName?.indexOf("人力资源") != -1) {
      INdex.value = true;
      if (router.currentRoute.value.query?.qw === "1") {
        INdex.value = true;
      }
    } else {
      INdex.value = false;
      if (router.currentRoute.value.query?.qw === "1") {
        INdex.value = true;
      } else {
        INdex.value = false;
      }
    }
  }
);
console.log(
  INdex.value,
  "INdex.value",
  router.currentRoute.value.query?.qw,
  "router.currentRoute.value.query?.qw"
);

const queryRef = ref();
//整体数据
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined, //用户名称
    EmployeeName: undefined, //员工姓名
    LECCAccountNumber: undefined, //LECC账号
    TeamOrGroup: undefined, //班组
    WhatAPost: undefined, //岗位
    BusinessCenter: undefined, //业务中心
    AuditStatus: undefined, //审核状态
    phonenumber: undefined, //手机号码
    status: undefined, //状态
    deptId: undefined,
    Title: undefined, //标题
  },
});
const { queryParams, form } = toRefs(data);
const dateRange = ref([]); //创建时间
const TimeOfExpense = ref([]); //费用发生时间
const moneyDate = ref([]);
const importTime = ref([]);
//业务中心下拉框数据
const BusinessCenterOption = ref([
  {
    value: "话务受理中心",
    label: "话务受理中心",
  },
  {
    value: "非话务受理中心",
    label: "非话务受理中心",
  },
  {
    value: "质培中心",
    label: "质培中心",
  },
  {
    value: "技术中心",
    label: "技术中心",
  },
]);
//社保管理审核状态
const statusS = ref([
  {
    value: "1",
    label: "待提交",
  },
  {
    value: "2",
    label: "待审核",
  },
  {
    value: "3",
    label: "审核中",
  },
  {
    value: "4",
    label: "通过",
  },
  {
    value: "5",
    label: "不通过",
  },
]);
// 文件类别
const fileTypeData = ref([
  {
    value: 2,
    label: "薪酬配置数据",
  },
  {
    value: 1,
    label: "社保配置数据",
  },
]);

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  emit(
    "searchBtn",
    props.WhichPage === "其他费用"
      ? moneyDate
      : props.WhichPage === "配置管理"
      ? importTime
      : TimeOfExpense
  );
  console.log(props.Params, "1111111111111111111111111111111111");
}
/** 重置按钮操作 */
function resetQuery() {
  queryRef.value.resetFields();
  dateRange.value = [];
  TimeOfExpense.value = [];
  moneyDate.value = [];
  emit(
    "reset",
    props.WhichPage === "其他费用"
      ? moneyDate
      : props.WhichPage === "配置管理"
      ? importTime
      : TimeOfExpense
  );
}
//下载社保导入模板
const downloadX = () => {
  emit("downloadX");
};
//下载薪酬导入模板
const downloadX1 = () => {
  emit("downloadX1");
};
//下载考勤导入模板
const downloadX2 = () => {
  emit("downloadX2");
};
//导出
const handleExport = () => {
  emit("handleExport");
};
//导入
const ToLeadInto = () => {
  emit("ToLeadInto");
};

//会签
const handleSign = () => {
  emit("handleSign");
};

// 新建其他费用
const handleAdd = () => {
  emit("handleAdd");
};

//提交审核
const submitShenHe = () => {
  emit("submitShenHe");
};
//撤回审核
const revocationShenHe = () => {
  emit("revocationShenHe");
};
// 导入社保配置数据
const socialConfigImport = () => {
  emit("socialConfigImport");
};
// 导入薪酬配置数据
const payConfigImport = () => {
  emit("payConfigImport");
};
// 下载社保配置模板
const socialConfigDown = () => {
  emit("socialConfigDown");
};
// 导入社保配置数据
const payConfigDown = () => {
  emit("payConfigDown");
};
// 费用名称字典
function getDict() {
  dict("pm_other_cost_type").then((res) => {
    nameData.value = res.data;
  });
}
getDict();
</script>
<style></style>
